<template>
  <div class="titleList SKU">
    <div class="goodsTilte" style=" vertical-align: top;">
      <span class="require">*</span>SKU表：
    </div>
    <div class="titleDetail">
      <table border="1px">
        <thead>
          <tr>
            <th style="width: 12%;">颜色</th>
            <th style="width: 15%;">颜色图</th>
            <th style="width: 12%;">尺码</th>
            <th style="width: 15%;">数量</th>
            <th style="width: 31%;">商品编码</th>
            <th style="width: 15%;">操作</th>
          </tr>
        </thead>
        <tbody v-for="(item, firstIndex) in specList" :key="firstIndex">
          <tr v-for="(size, index) in item.specpropertyList" :key="index">
            <td :rowspan="item.specpropertyList.length" v-if="!index">{{item.specpropertyName}}</td>
            <td :rowspan="item.specpropertyList.length" v-if="!index">
              <div class="imgUpload" :style="{'background-image': `url(${item.specpropertyImgFull})`}">
                <div class="imgUploadTitle" :class="{'white': item.specpropertyImgFull}">{{item.specpropertyImgFull? '编辑' : '上传图片'}}</div>
                <input type="file" accept="image/gif, image/jpeg, image/jpg, image/png" @change="onUploadImg($event, item)">
              </div>
            </td>
            <td>{{size.specpropertyName}}</td>
            <td class="small-input">
              <w-input class="small" rule="onlyIntNo0" error="请输入数值" v-model="size.specpropertyInventCount" @input="emitChangeToParent" :disabled="goodsType == '0'"></w-input>
            </td>
            <td>{{size.specpropertySerial}}</td>
            <td class="textM" @click="deleteItemByIndex(firstIndex, index)">删除</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { apiUploadImage } from 'js/api'

export default {
  props: {
    list: Array,
    goodsType: {
      type: [Number, String],
      default: '1'
    }
  },
  computed: {
    specList() {
      this.list.forEach(list => {
        if (!list.specpropertyImgFull) {
          this.$set(list, 'specpropertyImgFull', '')
        }
        list.specpropertyList.forEach(v => {
          if (this.goodsType == '0') {
            v.specpropertyInventCount = ''
          }
        })
      })
      return this.list
    }
  },
  methods: {
    /**
     * 上传图片
     *
     * @param { Object } ev    当前操作的输入框对象
     * @param { Object } item  当前操作的sku对象
     */
    onUploadImg(ev, item) {
      const oFile = ev.target.files[0]
      const formData = new FormData()
      if (!oFile) {
        return
      }
      if (oFile.size > 1048576) {
        this.$toast('请选择小于1M的图片')
        return
      }
      if (!/\.(png|jpeg|jpg|gif)/i.test(oFile.name)) {
        this.$toast('请选择JPG,JPEG,PNG,GIF格式的图片')
        return
      }
      formData.append('file', oFile)
      formData.append('id', this.$route.query.suid)
      formData.append('uploadType', 'main')
      formData.append('type', 'h5')

      // 将图片推送到远程
      apiUploadImage(formData).then(v => {
        item.specpropertyImg = v.data.oldFileName
        item.specpropertyImgFull = v.data.photoUrl
      })
    },

    /**
     * 从原本的数组中删除被点击的项
     *
     * @param { Number } firstIndex  父级索引
     * @param { Number } index       当前点击的条目
     */
    deleteItemByIndex(firstIndex, index) {
      // 将结果通知原本的数组
      this.$emit('delete', { firstIndex: firstIndex, secondIndex: index })
      this.$emit('on-change')
    },

    /**
     * 将更新提交给父级
     */
    emitChangeToParent() {
      this.$emit('on-change')
    }
  }
}
</script>

<style lang="scss">
.small-input {
  .w-input .error-tip {
    width: 100%;
    left: 0;
  }
}
</style>

<style lang="scss" scoped>
// 颜色图片上传
.SKU {
  .imgUpload {
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;
    height: 80px;
    width: 80px;
    line-height: 80px;

    .imgUploadTitle {
      width: 100%;
      text-align: center;

      &.white {
        color: white;
      }
    }
    input {
      cursor: pointer;
      width: 1000px;
      height: 1000px;
      overflow: hidden;
      opacity: 0;
      position: absolute;
      top: 0px;
      left: 0px;
    }
  }
}
.small {
  width: 66px;
}
</style>